<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本页面演示js操作Dom节点</title>
		<style type="text/css">
			#div1{
				border: #006400 solid 1px;
				height: 200px;
				width: 200px;
			}
			img{
				width: 100px;
			}
		</style>
	</head>
	<body>
        <input type="button" id="btnAdd" value="点击添加" onclick="addElement()" />		
		<div id="div1"></div>
		<ul id="ulNews">
		</ul>
		
		<a href="http://baidu.com" target="_blank" id="link1">打开这个网址吧！阿门！</a>
		<script type="text/javascript">
			var divBox = document.getElementById("div1");
			function addElement(){
				
				console.log("添加子节点之前的子节点：")
				// 若只有一个子节点.那么第一个子节点和最后一个子节点是同一个
				var boxFirstChild = divBox.firstChild;
				console.log(boxFirstChild);
				var boxLastChild = divBox.lastChild;
				console.log(boxLastChild);
				
				// 创建一个元素节点。参数为标签名
				var imgNode = document.createElement("img");
				// 可以直接设置元素属性
				imgNode.src = "1.jpg"
				// 追加子节点.参数必须为一个节点
				divBox.appendChild(imgNode);
				
				console.log("添加子节点之后的子节点：")
				// 若追加后只有imgNode则.第一个节点和最后一个节点都是imgNode
				var boxFirstChild = divBox.firstChild;
				console.log(boxFirstChild);
				var boxLastChild = divBox.lastChild;
				console.log(boxLastChild);
				
				// 创建属性节点nowId.
				var attrNode = document.createAttribute("nowId");
				// 属性节点的值.获取与设置都是使用nodeValue
				attrNode.nodeValue = '@#$SFSF!!@#!@#';
				
				divBox.setAttributeNode(attrNode);
				
			
			}
			
			// 动态的追加元素示例
			var ulList = document.getElementById("ulNews");
			for(var i=0; i<10; i++){
				var node = document.createElement("li");
				node.value = i;
				node.innerHTML = "<a href='http://www.baidu.com' target=''_blank'>新闻" + i + "</a>";
				
				// 创建属性节点nowId.
				var attrNode = document.createAttribute("nowId");
				// 属性节点的值.获取与设置都是使用nodeValue
				attrNode.nodeValue = 'id_' + i;
				// 设置li节点的属性.参数必须为一个属性节点
				node.setAttributeNode(attrNode);
				
				ulList.appendChild(node);
			}
			
			
			// 演示追加文本节点
			var link1 = document.getElementById("link1");
			console.log("修改前的文本节点");
			console.log(link1.firstChild);
			
			var textNode = document.createTextNode("不想打不想打就不想打开");
		    link1.appendChild(textNode);
			console.log("添加文本子节点之后的子节点：")
			var aFirstChild = link1.firstChild;
			console.log(aFirstChild);
			var aLastChild = link1.lastChild;
			console.log(aLastChild);
			var textNode2 = document.createTextNode("这次我要在第一个显示");
			// replaceChild的第一个参数为新节点.第二个参数为旧的子节点
			link1.replaceChild(textNode2, link1.firstChild);
			
			// 从父节点移除指定的子节点
			link1.removeChild(link1.lastChild);
			
			var node0 = document.createElement("li");
			node0.innerText = "-1新闻";
			// 在指定子节点前插入新的子节点,参数1为新的子节点.2为已存在的子节点
			ulList.insertBefore(node0, ulList.lastChild);
			
			
			// 查看元素节点的nodeName
			console.log("div的nodeName：" + divBox.nodeName);
			
			// 创建属性节点nowId.
			var attrNode = document.createAttribute("NowUserId");
			// 属性节点的值.获取与设置都是使用nodeValue
			attrNode.nodeValue = 'Kamihati';
			// 查看属性节点的nodeName
			console.log('属性节点的nodeName:' + attrNode.nodeName);
			
			// 显示文本节点的nodeName
			console.log("文本节点的NodeName:" + textNode.nodeName);
			
			// 显示文档节点的nodeName
			console.log("文档节点的nodeName:" + document.nodeName);
			
			ulList.setAttributeNode(attrNode);
			
			console.log("属性节点的nodeValue=" + attrNode.nodeValue);
			
			// 使用节点控制元素的样式
			divBox.style.backgroundColor = "pink";
			// 控制元素的宽度
			divBox.style.width = "300px";
		</script>
	</body>
</html>
